header {
    height: 175px;
    .swiper{
        width: 100%;
        height: 175px;
        .bg01{
            background: url(../../assets/imgs/part1.png) no-repeat center;
            background-size: cover;
        } 
        .bg02{
            background: url(../../assets/imgs/part2.png) no-repeat center;
            background-size: cover;
        } 
        .bg03{
            background: url(../../assets/imgs/part3.png) no-repeat center;
            background-size: cover;
        } 
    }
}

main {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1;
    padding: 10px;
    overflow: scroll;

    div {
        margin: 5px 0;
    }

    .firstbox {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        height: 140px;

        .ranking {
            height: 140px;
            width: 140px;
            line-height: 20px;
            opacity: 0.73;
            border-radius: 15px 15px 15px 15px;
            background-color: rgba(21, 146, 204, 100);
            color: rgba(16, 16, 16, 100);
            font-size: 14px;
            text-align: center;
            font-family: Arial;
            background-color: rgb(21, 146, 204);
            position: relative;

            span {
                position: absolute;
                left: 10px;
                top: 10px;
                color: rgb(0, 78, 115);
                font-size: 20px;
                font-weight: bold;
            }

            p {
                position: absolute;
                right: 15px;
                bottom: 40px;
                font-size: 80px;
                color: white;
            }

            img {
                position: absolute;
                width: 100px;
                height: 100px;
                left: 0;
                top: 20px;
                opacity: 0.5;

            }
        }

        .Clock {
            width: 202px;
            line-height: 20px;
            opacity: 0.73;
            border-radius: 15px 15px 15px 15px;
            background-color: rgba(123, 203, 245, 100);
            color: rgba(16, 16, 16, 100);
            font-size: 14px;
            text-align: center;
            font-family: Arial;
            background-color: rgb(123, 203, 245);
            position: relative;

            img {
                position: absolute;
                width: 100px;
                height: 100px;
                left: 10px;
                top: 20px;
                opacity: 0.5;
            }

            span {
                position: absolute;
                left: 10px;
                top: 10px;
                color: rgb(0, 78, 115);
                font-size: 20px;
                font-weight: bold;
            }

            h3 {
                width: 80px;
                height: 30px;
                border: 2px solid rgb(0, 78, 115);
                border-radius: 16px;
                text-align: center;
                line-height: 30px;
                color: rgb(0, 78, 115);
                font-weight: bold;
                position: absolute;
                right: 15px;
                bottom: 40px;

            }
        }
    }

    .scendbox {
        width: 100%;
        height: 120px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        // <!-- 运动数据 -->
        .Movement {
            width: 170px;
            height: 120px;
            border-radius: 15px;
            background: url(../../assets/imgs/index-card-data.png) no-repeat center;
            background-size: cover;
            color: white;

            p {
                margin-left: 10px;
                margin-top: 10px;
            }
        }
        // <!-- 累计运动勋章 -->
        .badge {
            height: 120px;
            width: 175px;
            opacity: 0.58;
            border-radius: 15px;
            background: #9dbde3;
            position: relative;

            img {
                position: absolute;
                width: 100px;
                height: 100px;
                left: 10px;
                top: 20px;
                opacity: 0.5;
            }

            span {
                position: absolute;
                left: 10px;
                top: 10px;
                color: rgb(0, 78, 115);
                font-size: 20px;
                font-weight: bold;
            }

            p {
                position: absolute;
                right: 25px;
                top: 20px;
                font-size: 80px;
                color: rgb(0, 78, 115);

                span {
                    position: absolute;
                    left: 40px;
                    top: 52px;
                }
            }
        }
    }
    // <!-- 课程训练 -->
    .Training {
        width: 385px;
        height: 100px;
        border-radius: 15px;
        background:url(../../assets/imgs/index-swiper-bg2.jpg) no-repeat top center;
        background-size:cover;
        background-position:0 -10px;
        h1{
            font-weight: normal;
            font-size: 16px;
            margin-top: 10px;
            margin-left: 10px;
            color: white;
        }
    }
    // <!-- 户外跑步 -->
    .running {
        width: 385px;
        height: 100px;
        border-radius: 15px;
        background: url(../../assets/imgs/index-card-run.png) no-repeat center;
        background-size: cover;
        h1{
            font-weight: normal;
            font-size: 16px;
            margin-top: 10px;
            margin-left: 10px;
            color: white;
        }
    }
}
// 尾部图标
#footer {
    height: 50px;
    ul{
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        .home,.sport,.circle,.me{
            width: 45px;
            height: 50px;
            text-align: center;
            font-size: 14px;
            cursor: pointer;
        }
    }
 
}